import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row, Select, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getSupplierList, addDistributor } from '@/services/supplier/distributor/add'
import { router } from 'umi'

const { Option } = Select

const { TextArea } = Input

const Add = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [supplierList, setSupplierList] = useState([])

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    await getSupplierLists()
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {

  }
  // 返回按钮
  const goBack = () => {
    props.history.goBack(-1)
  }
  // 获取商户列表
  const getSupplierLists = async () => {
    let res = await getSupplierList()
    if (res.code === '0') {
      setSupplierList(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 审核
  const submit = async () => {
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        supplierId: values.supplierId,
        distributorInfo: {
          address: values.address,
          companyName: values.companyName,
          contactName: values.contactName,
          contactPhone: values.contactPhone,
          description: values.description,
          distributorLogo: '',
          shareDescription: values.shareDescription,
          supplierId: values.supplierId
        }
      }
      let res = await addDistributor(params)
      if (res.code === '0') {
        alert(res.msg)
        router.push({ pathname: '/supplier/distributor/list'})
      } else {
        alert(res.msg)
      }
    })
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Button type="primary" onClick={goBack}>返回</Button>
      <Row gutter={24}>
        <Col span={24}>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label={`所属商户`}>
            {getFieldDecorator(`supplierId`, {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                {supplierList && supplierList.map(r => <Option key={r.id} value={r.id}>{r.merchantName}</Option>)}
              </Select>)
            }
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label={`渠道商名称`}>
            {getFieldDecorator(`companyName`, {})
              (<Input placeholder="请输入渠道商名称" />)
            }
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label={`渠道商地址`}>
            {getFieldDecorator(`address`, {})
              (<Input placeholder="请输入渠道商地址" />)
            }
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label={`联系人`}>
            {getFieldDecorator(`contactName`, {})
              (<Input placeholder="请输入联系人" />)
            }
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label={`联系电话`}>
            {getFieldDecorator(`contactPhone`, {})
              (<Input placeholder="请输入联系电话" />)
            }
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label={`简介`}>
            {getFieldDecorator(`description`, {})
              (<TextArea placeholder="请输入简介" />)
            }
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} label={`分享描述`}>
            {getFieldDecorator(`shareDescription`, {})
              (<TextArea placeholder="请输入分享描述" />)
            }
          </Form.Item>
        </Col>
      </Row>
      <Button type="primary" onClick={submit}>审核</Button>
    </PageHeaderWrapper>
  )
}

export default Form.create()(Add)
